<template>
  <view class="box" @click="informationNoBubbles = false">
    <template v-if="!loding">
      <view
        class="headTop"
        :class="[clarity <= 0.2 ? 'anamorphism' : '']"
        :style="[
          { paddingTop: statusBarHeight1 + 'px' },
          { paddingBottom: clarity >= 0.9 ? '0' : '1px' },
          { borderBottom: clarity >= 0.9 ? '1px solid #eee' : 'none' },
          {
            backgroundColor:
              clarity <= 0.2 ? 'rgba(255,255,255,0)' : 'rgba(255,255,255,' + clarity + ')',
          },
        ]"
      >
        <!--  #ifdef APP-PLUS -->
        <image
          class="image2"
          v-if="clarity <= 0.2"
          @click="fanhui"
          src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
          v-show="titIndex != 3"
        />
        <image
          class="image2"
          v-else
          @click="fanhui"
          src="https://pic.bangbangtongcheng.com/8937350f727e4eeda6e97ab0d7398e65"
          v-show="titIndex != 3"
        />
        <!-- #endif -->
        <!-- #ifndef APP-PLUS -->
        <template v-if="beforePage != ''">
          <image
            class="image2"
            v-if="clarity <= 0.2"
            @click="fanhui"
            src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
          ></image>
          <image
            class="image2"
            v-else
            @click="fanhui"
            src="https://pic.bangbangtongcheng.com/8937350f727e4eeda6e97ab0d7398e65"
          ></image>
        </template>
        <template v-else>
          <image
            class="image2"
            v-if="clarity <= 0.2"
            @click="shouye"
            src="https://pic.bangbangtongcheng.com/273355a6b7cd4bcb8b4cf8baf9a4ad9a"
          ></image>
          <image
            class="image2"
            v-else
            @click="shouye"
            src="https://pic.bangbangtongcheng.com/fc915aba003f4504a80d16c7a8c9b348"
          ></image>
        </template>
        <!-- #endif -->
      </view>
      <view class="tit">
        <view v-if="titIndex == 1" class="banner">
          <swiper
            style="min-height: 0rpx; height: 500rpx"
            class="screen-swiper square-dot"
            :circular="true"
            :autoplay="true"
            indicator-active-color="#ffffff"
            interval="5000"
            duration="500"
            :current="current"
            :indicator-dots="false"
            @change="swiperC1"
          >
            <swiper-item
              v-for="(item, index) in swiperList"
              :key="index + 'ss'"
              @click="clickImg(swiperList, index)"
            >
              <image style="margin-top: 0px !important" :src="imgUrl + item" mode="aspectFill" />
            </swiper-item>
          </swiper>
        </view>
        <video
          v-if="titIndex == 2"
          class="video"
          :src="imgUrl + video"
          :poster="imgUrl + video + '?vframe/jpg/offset/0'"
        >
          <!-- #ifdef APP-PLUS -->
          <cover-view
            @click="titxuan(1)"
            style="
              width: 15%;
              height: 50rpx;
              background-color: #ffffff;
              z-index: 1;
              position: absolute;
              bottom: 10rpx;
              left: 35%;
              text-align: center;
              line-height: 45rpx;
              border-radius: 25px;
            "
          >
            图片</cover-view
          >
          <!-- <cover-view class="fenxiang" @click="Mores">更多</cover-view> -->
          <cover-view class="Wfanhui" @click="fanhui">
            <cover-image
              class="fanhui"
              @click.stop="fanhui"
              src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
            ></cover-image>
          </cover-view>
          <!-- #endif -->
        </video>
        <view class="butbox">
          <view
            :class="titIndex == 2 ? 'but xuan' : 'but'"
            @click="titxuan(2)"
            v-if="video != ''"
            style="margin-right: 10rpx"
            >视频</view
          >
          <view class="tu">
            <view :class="titIndex == 1 ? 'but xuan' : 'but'" @click="titxuan(1)">图片</view>
          </view>
        </view>
        <view
          class="rotaryCastDiagram"
          style="background: rgba(51, 51, 51, 0.65); color: #fff"
          v-if="titIndex != 2"
        >
          {{ current + 1 }}/{{ swiperList.length }}
        </view>
      </view>
      <view
        class=""
        @click.stop="informationNoBubbles = !informationNoBubbles"
        style="margin-top: 40rpx; margin-left: 30rpx; position: relative"
      >
        信息编号：{{ data.id }}
        <view class="informationNoBubble" v-if="informationNoBubbles">
          <view class="binds_1">
            信息编号是唯一的信息身份号码，可在帮帮同城进行准确搜索查找。
          </view>
          <view class="binds_2"> 联系发布人时可通过信息编号确认信息。 </view>
        </view>
      </view>
      <view class="title">
        <view class="title_top">
          <view class="name"
            >{{ data.vehicleBrandModel.split('|')[0] + ' ' }}
            {{ data.vehicleBrandModel.split('|')[1] || '' }}</view
          >
        </view>
        <view class="title_bottom" v-if="data.intervalPrice.split('-').length > 1">
          {{ data.intervalPrice.split('-')[0] + '万-' + data.intervalPrice.split('-')[1] + '万' }}
        </view>
        <view class="title_bottom" v-else>
          {{ data.title_bottom }}
        </view>
      </view>
      <view class="guige">
        <span>车辆信息</span>
        <view class="guigexq">
          <view class="qian">
            <text style="font-size: 40rpx; color: #64b6a8">{{ data.model }}</text>
            <view style="font-size: 24rpx; color: #999">车型</view>
          </view>
          <view class="hu">
            <text style="font-size: 40rpx; color: #64b6a8">{{
              data.bodyStructureDoors +
              '门' +
              data.bodyStructureSeat +
              '座' +
              data.bodyStructureVehicle +
              '车'
            }}</text>
            <view style="font-size: 24rpx; color: #999999">车身结构</view>
          </view>
          <view class="mian">
            <text style="font-size: 40rpx; color: #64b6a8">{{ data.vehicleClassification }}</text>
            <view class="mianji" style="font-size: 24rpx; color: #999999">车辆类型</view>
          </view>
        </view>
      </view>
      <view class="xinxi">
        <view class="name">
          <view class="name_left"> 基础信息 </view>
        </view>
        <view class="list">
          <view style="width: 345rpx">
            <text style="color: #999999">车辆品牌：</text>
            {{ data.vehicleBrandModel.split('|')[0] }}
          </view>
          <view style="width: 345rpx">
            <text style="color: #999999">车辆类型：</text>
            {{ data.vehicleClassification }}
          </view>
          <view style="width: 345rpx">
            <text style="color: #999999">排放标准：</text>
            {{ data.emissionStandard || '--' }}
          </view>
          <view style="width: 345rpx">
            <text style="color: #999999">变速箱：</text>
            {{ data.transmissionCase == 1 ? '自动' : '手动' }}
          </view>
          <view style="width: 345rpx">
            <text style="color: #999999">燃油类型：</text>
            {{ data.fuelType }}
          </view>
          <view style="width: 690rpx" v-if="data.exteriorColor">
            <text style="color: #999999">车身颜色：</text>
            {{ data.exteriorColor }}
          </view>
          <view style="width: 690rpx">
            <text style="color: #999999">排量：</text>
            {{ data.displacement }}
          </view>
          <view style="width: 690rpx" v-if="data.latitude">
            <text style="color: #999999">看车地点：</text>
            {{ data.carViewingPlace }}
            <view>
              <image
                class="dingwei"
                @click="openMap"
                src="https://pic.bangbangtongcheng.com/static/bbcz/daohang_01.png"
              />
            </view>
          </view>
        </view>
      </view>
      <view class="jieshao">
        <view class="name">车况描述</view>
        <view
          class="detail"
          style="margin-left: 30rpx; width: 690rpx; font-size: 15px; line-height: 24px"
        >
          {{ data.vehicleConditionDescription }}</view
        >
      </view>
      <view class="technicianWill">
        <view class="name">车况实拍</view>
        <view class="photograph">
          <image
            style="width: 100%"
            @click="ViewImage(data.bodyAppearance)"
            :src="data.bodyAppearance.split('|')[0]"
            mode="widthFix"
          ></image>
          <image
            style="width: 100%"
            @click="ViewImage(data.instrumentCentralControl)"
            :src="data.instrumentCentralControl.split('|')[0]"
            mode="widthFix"
          ></image>
          <!-- <view class="photograph_item">
						<image class="image2" :src="imgUrl+swiperList[2]" mode="aspectFill"></image>
						<image class="image2" :src="imgUrl+swiperList[3]" mode="aspectFill"></image>
					</view> -->
          <view class="photographse">
            <!-- <image class="image2" :src="imgUrl+swiperList[4]" mode="aspectFill"></image> -->
            <!-- <view > -->
            <image
              style="width: 100%"
              @click="ViewImage(data.carSeat)"
              :src="data.carSeat.split('|')[0]"
              mode="widthFix"
            ></image>
            <view class="loadMore" @click="photos()">查看更多></view>
            <!-- </view> -->
          </view>
        </view>
      </view>
      <view class="carPosition" v-if="data.latitude">
        <view class="name">看车位置</view>
        <view class="map" @click="openMap">
          <image
            style="width: 100%; height: 100%"
            :src="
              'https://apis.map.qq.com/ws/staticmap/v2/?zoom=11&scale=2&key=HUZBZ-ZQX6X-ZBO4M-TKCO5-7Q6ZZ-Z7FUL&size=345*160&center=' +
              (data.latitude + ',' + data.longitude) +
              '&markers=size:tiny|icon:https://pic.bangbangtongcheng.com/mapicon.png|' +
              (data.latitude + ',' + data.longitude)
            "
            mode=""
          ></image>
          <!-- <map class="AppMap" ref="map1" :scale="13" id="map1" @controltap="controlClick" :controls="controls" :markers="markerList" :latitude="data.latitude" :longitude="data.longitude"></map> -->
        </view>
      </view>
      <view class="disclaimer">
        {{ disclaimers }}
      </view>
      <informationNo ref="informationNo"></informationNo>
      <uniBall></uniBall>
    </template>
    <dLoading v-if="loding"></dLoading>
  </view>
</template>
<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        fangfa: false,
        playstate: true,
        titIndex: 1,
        swiperList: [],
        swiperList1: [],
        furnituresss: [],
        weig: false,
        id: '',
        imgUrl: this.$imgSrc,
        data: {},
        video: '',
        lcType: 0,
        lou1: '',
        current: 0,
        current1: 0,
        limit: '',
        limit1: '',
        jjrInfo: {},
        userInfo: uni.getStorageSync('Pduser'),
        Count: '',
        isCollection: '',
        userisCollection: '',
        contraststate: false,
        housetype: 1,
        beforePage: '',
        // 变色
        clarity: 0,
        capsuleWidth: 0,
        loding: true,
        disclaimers: '',
        markerList: [],
        controls: [],
        informationNoBubbles: false,
      }
    },
    filters: {
      nums(val) {
        return val.toFixed(2)
      },
      images(url) {
        let arr = url.split('')
        if (arr[0] == '/') {
          return this.imgUrl + url
        } else {
          return url
        }
      },
    },
    onPageScroll(e) {
      if (e.scrollTop <= 200) {
        this.clarity = (e.scrollTop / 200).toFixed(2)
      }
    },
    onLoad(options) {
      var than = this
      this.id = options.id
      this.Disclaimers()
      this.getcontrast()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
      /* #ifndef APP-PLUS */
      var pages = getCurrentPages() //当前页
      this.beforePage = pages[pages.length - 2].route //上个页面、
      /* #endif*/
    },
    onReady() {
      /* #ifdef MP-WEIXIN*/
      this.capsuleWidth = wx.getMenuButtonBoundingClientRect().width
      /* #endif */
    },
    onShow() {
      var than = this
      this.getData(true)
      setTimeout(function () {
        than.weig = false
      }, 3000)
    },
    methods: {
      // 信息编号
      informationNos() {
        this.$refs.informationNo.informationNo_xxbh()
      },
      // 免责声明
      Disclaimers() {
        this.$myRequest
          .get('/api/mobile/public/getDisclaimersByDisclaimerLocation', {
            disclaimerLocation: '9',
          })
          .then((res) => {
            this.disclaimers = res.Disclaimers.disclaimerContent
          })
      },
      //点击地图控件时触发
      controlClick(e) {
        switch (e.detail.controlId) {
          case 999:
            uni.createMapContext('map1', this).moveToLocation({
              latitude: this.data.latitude,
              longitude: this.data.longitude,
            })
            break
        }
      },
      ViewImage(url) {
        let arr = []
        arr.push(url.split('|')[0])
        uni.previewImage({
          urls: arr,
          current: url.split('|')[0],
        })
      },
      doorSeen() {
        uni.navigateTo({
          url: '/pages_owner/index/doorSeen?id=' + this.id,
        })
      },
      //查询是否加入对了
      getcontrast() {
        let contrastList = uni.getStorageSync('czcontrast')
        if (contrastList) {
          this.contraststate = contrastList.some((v) => Number(v.id) === Number(this.id))
        }
      },
      titxuan(index) {
        this.titIndex = index
      },
      weigui() {
        uni.navigateTo({
          url: '/pages_intermediary/illegalBehavior?id=' + this.jjrInfo.id + '&index=2',
        })
      },
      // 点击比字触发的事件
      dianbi() {
        uni.navigateTo({
          url: '/pages_my/contrast?type=1',
        })
      },
      contrast(type) {
        if (!this.contraststate) {
          let contrastList = []
          contrastList = uni.getStorageSync('czcontrast')
          if (contrastList.length >= 4) {
            uni.showToast({
              title: '最多只能添加4辆车源进行对比，请先前往对比删除后再添加',
              icon: 'none',
            })
            return false
          }
          if (contrastList) {
            uni.showToast({
              title: '加入对比成功',
              icon: 'none',
            })
            contrastList.push(this.data)
            uni.setStorageSync('czcontrast', contrastList)
          } else {
            contrastList = []
            contrastList.push(this.data)
            uni.setStorageSync('czcontrast', contrastList)
          }
        } else {
          let contrastList = uni.getStorageSync('czcontrast')
          for (var i = 0; i < contrastList.length; i++) {
            if (contrastList[i].id == this.id) {
              contrastList.splice(i, 1)
              uni.setStorageSync('czcontrast', contrastList)
              this.contraststate = false
              uni.showToast({
                title: '取消对比成功',
                icon: 'none',
              })
            }
          }
        }
        this.getcontrast()
      },
      // 增加帮帮豆
      addIntegral(val, title) {
        this.$myRequest
          .post('/mob/iteration/addIntegral', {
            userId: this.userInfo.id,
            ruleNumber: val,
            title: title || '转发车系',
          })
          .then((res) => {})
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      chat() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url: `/pages/news/chat1?receiver=${this.jjrInfo.id}&img=${this.jjrInfo.image}&nikeName=${
            this.jjrInfo.userName || this.jjrInfo.nikeName
          }&id=${this.data.id}`,
        })
      },
      jubao() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url: '/pages_houses/housing/informer?id=' + this.jjrInfo.id + '&houseId=' + this.id,
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      shouye() {
        uni.switchTab({
          url: '/pages/index/index',
        })
      },
      userFy() {
        if (!this.showLogin()) {
          return
        }
        if (this.jjrInfo.isAgent == 1) {
          uni.navigateTo({
            url: '/pages_owner/dealer/goldConsultant?id=' + this.jjrInfo.id,
          })
        }
      },
      photos() {
        uni.navigateTo({
          url: '/pages_owner/index/seePhotos?id=' + this.id,
        })
      },
      openMap() {
        // console.log(this.data.latitude, this.data.longitude);
        let that = this
        /* #ifdef H5 */
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            uni.hideLoading()
            wxshare.config({
              debug: false, //是否打开调试
              appId: re.data.appId, // 公众号的唯一标识
              timestamp: re.data.timestamp, // 生成签名的时间戳
              nonceStr: re.data.nonce, // ，生成签名的随机串
              signature: re.data.signature, // 签名
              jsApiList: ['openLocation'],
            })
            wxshare.ready(function () {
              wxshare.openLocation({
                latitude: Number(that.data.latitude), //目的地latitude
                longitude: Number(that.data.longitude), //目的地longitude
                // name: that.data.title,
                // address: that.data.address,
                scale: 15, //地图缩放大小，可根据情况具体调整
              })
            })
          },
        })
        /* #endif */
        /* #ifndef H5 */
        uni.openLocation({
          latitude: Number(that.data.latitude),
          longitude: Number(that.data.longitude),
          name: that.data.address,
          success: function () {
            console.log('success')
          },
        })
        /* #endif */
      },
      ll() {
        if (!this.userinfo.phone) {
          return
        }
        let that = this
        this.$myRequest
          .post('/mob/user/saveUserCollection', {
            userId: this.userinfo.id,
            type: '2',
            cbType: '1',
            relationId: this.id,
          })
          .then((res) => {})
      },
      sc() {
        if (!this.userinfo.phone) {
          uni.showModal({
            title: '',
            content: '尚未登录，前往登录？',
            showCancel: true,
            success: (res) => {
              if (res.confirm) {
                //#ifdef H5
                uni.navigateTo({
                  url: '/pages/login/login?isNeedBack=true',
                })
                //#endif
                //#ifdef APP-PLUS
                uni.navigateTo({
                  url: '/pages/login/login?isNeedBack=true',
                })
                //#endif
                //#ifdef MP-WEIXIN
                uni.navigateTo({
                  url: '/pages/login/phoneLogin',
                })
                //#endif
              }
            },
          })
          return
        }
        let that = this
        this.$myRequest
          .post('/api/mobile/vehicleOwner/collectionOrCancelCollection', {
            collectorId: this.userInfo.id,
            relationId: this.data.id,
            collectionType: '4',
            ids: this.data.collectionAttention ? this.data.collectionAttention.id : '',
          })
          .then((res) => {
            uni.showToast({
              title: '收藏成功',
              icon: 'none',
              mask: true,
            })
            this.getData()
          })
      },
      async getPhone() {
        this.onphone()
      },
      onphone() {
        if (!this.userinfo.phone) {
          uni.showModal({
            title: '',
            content: '尚未登录，前往登录？',
            showCancel: true,
            success: (res) => {
              if (res.confirm) {
                //#ifdef H5
                uni.navigateTo({
                  url: '/pages/login/login?isNeedBack=true',
                })
                //#endif
                //#ifdef APP-PLUS
                uni.navigateTo({
                  url: '/pages/login/login?isNeedBack=true',
                })
                //#endif
                //#ifdef MP-WEIXIN
                uni.navigateTo({
                  url: '/pages/login/phoneLogin',
                })
                //#endif
              }
            },
          })
          return
        }
        this.$myRequest
          .post('/api/mobile/public/increaseCallRecord', {
            userId: this.userInfo.id,
            businessType: '2',
            telephoneNumber: this.jjrInfo.phone,
            associationId: this.jjrInfo.id,
            callType: 5,
          })
          .then((res) => {})
        uni.makePhoneCall({
          // 手机号
          phoneNumber: this.jjrInfo.phone,
          // 成功回调
          success: (res) => {
            console.log('调用成功!')
          },

          // 失败回调
          fail: (res) => {
            console.log('调用失败!')
          },
        })
      },
      clickImg(url, index) {
        url = url.map((v) => {
          v = this.imgUrl + v
          return v
        })
        wx.previewImage({
          urls: url, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
          current: index, // 当前显示图片的http链接，默认是第一个
          indicator: 'number',
          success: function (res) {},
          fail: function (res) {},
          complete: function (res) {},
        })
      },
      getData(status) {
        let that = this
        this.$myRequest
          .get('/api/mobile/vehicleOwner/queryVehicleInformationById', {
            vehicleId: this.id,
            userId: this.userInfo.id,
          })
          .then((res) => {
            this.data = res.vehicleInformation
            if (res.vehicleInformation.latitude) {
              this.markerList = [
                {
                  id: 1,
                  latitude: res.vehicleInformation.latitude,
                  longitude: res.vehicleInformation.longitude,
                  iconPath: 'https://pic.bangbangtongcheng.com/locationpic.png',
                  width: 30,
                  height: 30,
                  anchor: {
                    x: 0.5,
                    y: 0.5,
                  },
                },
              ]
            }
            this.video = res.vehicleInformation.vehicleVideo
            // this.swiperList= res.vehicleInformation.vehiclePictures.split("|")
            this.swiperList = res.vehicleInformation.bodyAppearance
              .split('|')
              .concat(res.vehicleInformation.instrumentCentralControl.split('|'))
            this.swiperList = this.swiperList
              .concat(res.vehicleInformation.carSeat.split('|'))
              .concat(res.vehicleInformation.vehiclePictures.split('|'))
            this.jjrInfo = res.vehicleInformation.userInfo
            that.$nextTick(() => {
              setTimeout(() => {
                this.loding = false
                // if(!this.controls.length){
                // 	this.mapdian()
                // }
              }, 1000)
            })
          })
      },
      mapdian() {
        this.$nextTick(() => {
          uni
            .createSelectorQuery()
            .in(this)
            .select('.map')
            .fields(
              {
                size: true,
              },
              (res) => {
                this.controls.push({
                  id: 999,
                  iconPath: 'https://pic.bangbangtongcheng.com/static/dingwei1.png',
                  clickable: true,
                  position: {
                    left: res.width - 50,
                    top: 100,
                    width: 50,
                    height: 60,
                  },
                })
              }
            )
            .exec()
        })
      },
      swiperC1(e) {
        this.current = e.detail.current
      },
      //点击更多按钮
      Mores() {
        let that = this
        uni.showActionSheet({
          itemList: ['转发', '对比'],
          success: function (res) {
            console.log('选中了第' + (res.tapIndex + 1) + '个按钮')
            if (res.tapIndex + 1 == 1) {
              that.fn()
            } else {
              that.dianbi()
            }
          },
          fail: function (res) {
            console.log(res.errMsg)
          },
        })
      },
    },
    computed: {
      price() {
        return this.data.price
      },
      UnitPrice() {
        return ((this.data.price * 10000) / this.data.area).toFixed(2)
      },
      ...mapGetters(['userid', 'islogin', 'statusBarHeight1', 'userinfo']),
    },
  }
</script>
<style lang="less" scoped>
  .inContrastB {
    width: 146rpx;
    height: 52rpx;
    border-radius: 22rpx;
    border: 2px solid #ffffff;
    font-size: 26rpx;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 52rpx;
    margin: 0 40rpx;
  }

  .inContrastH {
    width: 146rpx;
    height: 52rpx;
    border-radius: 22rpx;
    border: 2px solid #000;
    font-size: 26rpx;
    font-weight: 400;
    color: #000;
    text-align: center;
    line-height: 52rpx;
    margin: 0 40rpx;
  }

  .new-title-wrapper {
    background-color: red;
    width: 100%;
    height: 88rpx;
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
  }

  .headTop {
    width: 100%;
    height: 88rpx;
    position: fixed;
    top: 0;
    z-index: 100000;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    // padding:0 40rpx;
    // padding-top: 4%;
    /* #ifdef MP-WEIXIN */
    // height: 120rpx;
    // padding-top: 10%;
    /* #endif */
    .image1 {
      width: 50rpx;
      height: 50rpx;
      margin-top: 0;
    }

    .image2 {
      width: 50rpx;
      height: 50rpx;
      margin-top: 0;
      margin: 0 20rpx;
    }

    .dianbi {
      font-size: 34rpx;
    }

    .fenxiang {
      font-size: 34rpx;
    }
  }

  .anamorphism {
    background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.4), rgba(255, 255, 255, 0));
  }

  .box {
    width: 100%;
    padding-bottom: 160rpx;
    background-color: #fff;
    margin-top: 0 !important;

    .fenxiang {
      width: 50px;

      height: 50rpx;
      background-color: rgb(127, 127, 127);
      color: #fff;
      border-radius: 10%;
      line-height: 50rpx;
      text-align: center;
      position: fixed;
      font-size: 12px;

      top: 6%;
      // right: 10%;
      right: 5%;
      z-index: 10000000 !important;
      /* #ifdef APP */
      line-height: 40rpx;
      /* #endif */
    }

    .Wfanhui {
      width: 100rpx;
      height: 100rpx;
      border-radius: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000000 !important;
      position: fixed;
      top: 4.5%;

      // left: 15px;
      .fanhui {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50rpx;
        background-color: #64b6a8;
      }
    }
  }

  .dibu {
    position: fixed;
    bottom: -2rpx;
    margin-top: 36rpx;
    width: 100%;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);

    .zhiwei {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 240rpx;
      position: absolute;
      // top: rpx;
      left: 30rpx;
      font-size: 28rpx;
      vertical-align: middle;

      .xin {
        // display: flex;
        height: 100rpx;
        width: 100rpx;
        position: fixed;
        bottom: -2%;
        left: 15%;

        .img3 {
          width: 20rpx;
          height: 20rpx;
        }
      }

      .img {
        vertical-align: middle;
        width: 80rpx;
        height: 80rpx;
        margin-right: 12rpx;
        border-radius: 80rpx;
      }
    }

    .shou {
      position: absolute;

      left: 216rpx;
      font-size: 24rpx;
      width: 120rpx;
      text-align: center;

      .img {
        vertical-align: middle;
        width: 54rpx;
        height: 54rpx;
        // margin-left: 24rpx;
      }
    }

    .daoh {
      position: absolute;

      left: 292rpx;
      font-size: 24rpx;
      width: 120rpx;
      text-align: center;

      .img {
        vertical-align: middle;
        width: 54rpx;
        height: 54rpx;
        // margin-left: 24rpx;
      }
    }

    .lian {
      position: absolute;
      left: 400rpx;
      font-size: 24rpx;

      .img {
        vertical-align: middle;
        width: 54rpx;
        height: 54rpx;
        margin-left: 12rpx;
      }
    }

    .liao {
      position: absolute;
      top: 35rpx;
      right: 22rpx;
      width: 200rpx;
      height: 70rpx;
      background: #64b6a8;
      border-radius: 36rpx;
      text-align: center;
      line-height: 70rpx;
      color: #fff;
    }

    .weigui {
      position: absolute;
      padding: 0px 10px 0px 10px;
      width: 690rpx;
      left: 30rpx;
      bottom: 0rpx;
      animation: all 6s;
      animation-name: mycolor;

      // mycolor 2s linear 3s infinite alternate
      .img {
        width: 100%;
        height: 134rpx;
      }

      p {
        position: absolute;
        left: 100rpx;
        bottom: 64rpx;
        font-size: 34rpx;
        color: #fff;
      }
    }

    @keyframes mycolor {
      0% {
        left: 30rpx;
        bottom: 140rpx;
        transform: scale(0 0.1);
      }

      100% {
        left: 30rpx;
        bottom: 140rpx;
        opacity: 0;
      }
    }
  }

  .mingpian {
    position: relative;
    width: 690rpx;
    height: 200rpx;
    background: #ffffff;
    box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
    border-radius: 18rpx;
    margin-top: 40rpx;
    margin-left: 30rpx;

    .name {
      position: absolute;
      top: 50rpx;
      left: 174rpx;
      font-size: 36rpx;
      width: 300rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .img1 {
      position: absolute;
      top: 10%;
      left: 30rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .img2 {
      position: absolute;
      bottom: 40rpx;
      left: 40rpx;
      width: 100rpx;
      height: 36rpx;
      background: url('https://pic.bangbangtongcheng.com/static/name.png');
      background-size: 100% 100%;
      font-size: 20rpx;
      color: #fff;
      text-align: center;
      line-height: 36rpx;
    }

    .zhiwei {
      position: absolute;
      top: 132rpx;
      left: 54rpx;
      font-size: 20rpx;
      color: #fff;
    }

    .xin {
      position: absolute;
      top: 102rpx;
      left: 170rpx;

      .img3 {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .chakan {
      position: absolute;
      top: 0;
      right: 0;
      width: 200rpx;
      height: 60rpx;
      background: #64b6a8;
      border-radius: 0px 18rpx 0px 18rpx;
      text-align: center;
      line-height: 60rpx;
      color: #fff;
      font-size: 24rpx;
    }

    .img4 {
      position: absolute;
      top: 100rpx;
      left: 530rpx;
      width: 54rpx;
      height: 54rpx;
    }

    .guan {
      position: absolute;
      bottom: 37rpx;
      right: 40rpx;
    }
  }

  .jieshao {
    border-top: 20rpx solid #f2f2f2;
    width: 100%;
    margin-top: 20rpx;

    .name {
      font-size: 34rpx;
      color: #333333;
      margin-top: 30rpx;
      margin-left: 30rpx;
    }

    .detail {
      word-break: break-all;
      padding-top: 40rpx;
    }
  }

  .technicianWill {
    margin: 0 30rpx;
    margin-top: 40rpx;

    .name {
      font-size: 34rpx;
      font-weight: 400;
      color: #333333;
    }

    .photograph {
      .image1 {
        width: 690rpx;
        height: 260rpx;
        border-radius: 16rpx;
      }

      .photographse {
        position: relative;

        .loadMore {
          width: 200rpx;
          height: 60rpx;
          position: absolute;
          bottom: 8rpx;
          right: 0;
          background-color: rgba(0, 0, 0, 0.45);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 36rpx;
        }
      }

      .photograph_item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .image2 {
          width: 332rpx;
          height: 150rpx;
          border-radius: 8rpx;
        }

        .image3 {
          width: 332rpx;
          height: 150rpx;
          border-radius: 8rpx;
          position: relative;
          margin-top: 20rpx;

          .loadMore {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.62);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24rpx;
            border-radius: 8rpx;
          }
        }
      }
    }
  }

  .carPosition {
    margin: 0 30rpx;
    margin-top: 40rpx;

    .name {
      font-size: 34rpx;
      font-weight: 400;
      color: #333333;
      margin-bottom: 16rpx;
    }

    .map {
      width: 690rpx;
      height: 325rpx;
      border-radius: 16rpx;
      overflow: hidden;

      .AppMap {
        width: 100%;
        height: 100%;
      }
    }
  }

  .disclaimer {
    width: 100%;
    margin-top: 20rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-top: 20rpx;
    font-size: 26rpx;
    color: #a19898;
    // margin-left:50rpx;
    word-break: break-all;
    margin-top: 16rpx;
  }

  image {
    width: 100%;
    margin-top: 10px;
  }

  .xinxi {
    position: relative;
    width: 690rpx;
    margin-top: 80rpx;
    margin-left: 30rpx;

    .name {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name_left {
        font-size: 34rpx;
        font-weight: 400;
        color: #333333;
      }

      .name_right {
        display: flex;
        align-items: center;

        .name_right_image {
          width: 34rpx;
          height: 36rpx;
          margin-top: 0;
        }

        .name_right_txt {
          margin-left: 8rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #64b6a8;
        }
      }
    }

    .list {
      width: 100%;
      margin-top: 20rpx;

      view {
        display: inline-block;
        position: relative;
        margin-bottom: 10rpx;

        .dingwei {
          width: 50rpx;
          height: 50rpx;
          vertical-align: middle;
          // margin-left: 20rpx;
          margin-bottom: 20rpx;
        }
      }

      .zixun {
        position: absolute;
        top: 110rpx;
        right: 30rpx;
        line-height: 20rpx;
        color: #349a88;

        image {
          position: absolute;
          top: 0rpx;
          width: 12rpx;
          height: 24rpx;
          margin-left: 20rpx;
        }
      }
    }
  }

  .guige {
    margin: 0 30rpx;
    margin-top: 30rpx;

    .guigexq {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;

      .qian {
        width: 180rpx;
        height: 70rpx;
        line-height: 36rpx;
        border-right: 2rpx solid #d0d0d0;
      }

      .hu {
        padding: 0 30rpx;
        width: 360rpx;
        height: 70rpx;
        line-height: 36rpx;
        border-right: 2rpx solid #d0d0d0;
      }

      .mian {
        padding-left: 50rpx;
        width: 180rpx;
        height: 70rpx;
        line-height: 36rpx;
      }
    }
  }

  .title {
    position: relative;
    margin-top: 40rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    padding-bottom: 20rpx;
    // height: 180rpx;
    border-bottom: 1px dashed #333;

    .title_top {
      display: flex;
      justify-content: space-between;

      .name {
        width: 426rpx;
        font-size: 34rpx;
        font-weight: 600;
        line-height: 48rpx;
      }

      .jubao {
        position: absolute;
        top: -20rpx;
        right: 30rpx;

        image {
          width: 58rpx;
          height: 58rpx;
        }

        view {
          text-align: center;
          font-size: 24rpx;
          color: #333333;
        }
      }
    }

    .title_bottom {
      font-size: 36rpx;
      font-weight: 600;
      color: #e32d2d;
      margin-top: 15rpx;
    }
  }

  .tit {
    position: relative;
    width: 100%;
    height: 500rpx;
    /* #ifdef APP-PLUS */
    height: auto;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    height: auto;
    /* #endif */

    video {
      width: 100%;
      height: 500rpx;
      max-width: 100%;
    }

    .video {
      width: 100%;
      height: 500rpx;
      max-width: 100%;
      position: relative;
    }

    .butbox {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 40rpx;
      z-index: 99999;

      .tu {
        display: inline-block;
        // width: 200rpx;
        height: 50rpx;
        border-radius: 30rpx;
        background: #ffffff;
        // margin-left: 24rpx;
        // margin-right: 180rpx;
      }

      .but {
        display: inline-block;
        text-align: center;
        line-height: 52rpx;
        width: 100rpx;
        height: 50rpx;
        background: #ffffff;
        border-radius: 30rpx;
      }

      .xuan {
        background: #64b6a8;
        color: #fff;
      }
    }

    .rotaryCastDiagram {
      position: absolute;
      right: 30rpx;
      bottom: 30rpx;
      text-align: center;
      line-height: 50rpx;
      width: 100rpx;
      height: 50rpx;
      background-color: rgba(51, 51, 51, 0.65);
      border-radius: 31rpx;
      color: #fff;
      font-size: 26rpx;
    }
  }

  .tit {
    .image1 {
      position: fixed;
      width: 50rpx;
      height: 50rpx;
      top: 40rpx;
      left: 0;

      background-color: rgb(127, 127, 127);
      border-radius: 50%;
      left: 30rpx;
      z-index: 10001;
    }
  }

  .tou {
    position: absolute;
    top: 0;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: rgba(0, 0, 0, 0);
    z-index: 9999;

    .image1 {
      // position: absolute;
      position: fixed;
      width: 50rpx;
      height: 50rpx;
      top: 40rpx;
      left: 0;
      // top: 116rpx;
      // margin-bottom: 10px;
      background-color: rgb(127, 127, 127);
      border-radius: 50%;
      left: 30rpx;
      z-index: 1001;

      /* #ifdef MP-WEIXIN */
      width: 50rpx;
      height: 50rpx;
      top: 78rpx;
      /* #endif */
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      right: 30rpx;
    }

    .dianbi {
      width: 30px;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      border-radius: 50%;
      line-height: 30px;
      position: fixed;
      font-size: 12px;
      top: 4%;
      /* #ifdef MP-WEIXIN */
      top: 10%;
      /* #endif */
      right: 0%;
      z-index: 10000000;
    }
  }

  .informationNoBubble {
    width: 500rpx;
    padding: 10rpx;
    border-radius: 10rpx;
    background-color: #ffffff;
    position: absolute;
    bottom: -150rpx;
    border: 1px solid #888;
    left: 150rpx;
    z-index: 1;

    .binds_1 {
      font-size: 24rpx;
      font-weight: 400;
      color: #333333;
      margin-bottom: 10rpx;
    }

    .binds_2 {
      font-size: 24rpx;
      font-weight: 400;
      color: #64b6a8;
    }

    &::before {
      width: 0px;
      height: 0px;
      position: absolute;
      padding: 0;
      border-left: 24rpx solid transparent;
      border-right: 20rpx solid transparent;
      border-bottom: 24rpx solid #fff;
      content: '';
      z-index: 12;
      position: absolute;
      left: 12rpx;
      top: -20rpx;
    }

    &::after {
      width: 0px;
      height: 0px;
      position: absolute;
      padding: 0;
      border-left: 24rpx solid transparent;
      border-right: 20rpx solid transparent;
      border-bottom: 24rpx solid #888;
      content: '';
      z-index: 10;
      position: absolute;
      left: 12rpx;
      top: -24rpx;
    }
  }
</style>
